<template>
	<view class="container" :style="'top:' +top+'rpx'" @touchmove.prevent @tap.stop="" @touchmove.stop.prevent="">
		<view class="search">
			<view class="search-input">
				<u-icon name="search" class="search-icon" size="42"></u-icon>
				<input :placeholder="placeholder" placeholder-style="color: #aeaeb1" v-model="search"
					@input="cancelFocus" @focus="cancelFocus" :disabled="!isShaiXuan && isShaiXuan?true:false" />
				<u-icon v-if="isFocus" @click="clearInput" class="search-icon-cancel" size="32" name="close-circle"></u-icon>
			</view>
		</view>
		<slot name="right" />
	</view>

</template>

<script>
	export default {
		name: "search",
		data() {
			return {
				search: '',
				isFocus: false,
				top: 0,
			};
		},
		props: {
			placeholder: String,
			isShaiXuan:Boolean
		},
		methods: {
			cancelFocus(e) {
				this.isFocus = this.search ? true : false
				this.searchTimer && clearTimeout(this.searchTimer)
				this.searchTimer = setTimeout(() => {
					this.$emit("cancelFocus", {
						type: e.type,
						search: this.search
					});
				}, 300)
			},
			clearInput() {
				this.isFocus = false
				this.search = ""
				this.$emit("clearInput");
			}
		}
	}
</script>

<style lang="scss">
	.container {
		z-index: 1;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		background-color: #FFFFFF;
		box-shadow: 5rpx 5rpx 5rpx #f3f3f3;
		padding: 14rpx 36rpx;
	}

	.search {
		
		flex: 1;
	}

	.search-input {
		display: flex;
		align-items: center;
		flex: 1;
		background-color: #F6F6F6;
		border-radius: 10rpx;
		color: #323233;
		padding: 14rpx 20rpx 14rpx 0;
	}

	.search-input input {
		font-size: 28rpx;
		height: 50rpx;
		flex: 1;
	}

	.search-icon {
		margin: 0 15rpx 0 20rpx;
	}

	.search-icon-cancel {
		margin: 0 15rpx;
	}

	.searchButton {
		padding-right: 10rpx;
		font-size: 28rpx;
	}
</style>
